<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 定义一个动画 */
        @keyframes dw1 {
            from {
                color: #ff0000;
                left: 0px;
            }
            to {
                color: #00ffff;
                left: 500px;
            }
        }

        @keyframes dw2 {
            0% {
                color: #ff0000;
                left: 0px;
            }
            25% {
                color: #00ffff;
                left: 250px;
            }
            50% {
                color: #ff0000;
                left: 125px;
            }
            75% {
                left: 375px;
                color: #00ffff;
            }
            100% {
                color: #ff0000;
                left: 500px;
            }
        }

        .div1 {
            animation-name: dw1;
            /* 播放次数：无限 */
            animation-iteration-count: infinite;
            /*正向| 反向播放 */
            animation-direction: alternate;
            animation-duration: 1s;
            position: absolute;
        }

        .div2 {
            animation-name: dw2;
            /* 播放次数：无限 */
            animation-iteration-count: infinite;
            /*正向| 反向播放 */
            animation-direction: alternate;
            animation-duration: 1s;
            position: absolute;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="div1">我是文字</div>
    <div class="div2">我是文字</div>
</body>
</html>